<template>
  <div id="Content-page">
    <div class="content-main">
      <!-- 经营概况 -->
      <BusinessAnalysis :data="businessData"></BusinessAnalysis>
      <!-- 销售额趋势和热销商品排名 -->
      <div class="order-data">
        <SalesDrend :data="salesData"></SalesDrend>
        <HotSellingProducts :data="hotSellingData"></HotSellingProducts>
      </div>
      <!-- 支付渠道和热门商品分类 -->
      <div class="payment-method">
        <PaymentMethodRanking :data="paymentData"></PaymentMethodRanking>
        <PopularCategories :data="popularData"></PopularCategories>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import BusinessAnalysis from "@/page/data-analysis/components/business-analysis.vue";
import SalesDrend from "@/page/data-analysis/components/sales-drend.vue";
import HotSellingProducts from "@/page/data-analysis/components/hot-selling-products.vue";
import PaymentMethodRanking from "@/page/data-analysis/components/payment-method-ranking.vue";
import PopularCategories from "@/page/data-analysis/components/popular-categories.vue";

import {
  businessAnalysisApi,
  salesDrendApi,
  hotSellingProductsApi,
  paymentMethodRankingApi,
  popularCategoriesApi,
} from "@/api/api";
import type {
  businessAnalysisRes,
  salesDrendRes,
  hotSellingProductsRes,
  paymentMethodRankingRes,
  popularCategoriesRes,
} from "@/types/index";
// 请求所有数据
onMounted(async () => {
  //经营概况
  const res1 = await businessAnalysisApi();
  businessData.value = res1.data;
  //销售额趋势
  const res2 = await salesDrendApi();
  salesData.value = res2.data;
  //热销商品排名
  const res3 = await hotSellingProductsApi();
  hotSellingData.value = res3.data;
  //支付渠道排名
  const res4 = await paymentMethodRankingApi();
  paymentData.value = res4.data;
  //热门商品分类
  const res5 = await popularCategoriesApi();
  popularData.value = res5.data;
});
//经营概况
const businessData = ref<businessAnalysisRes[]>([]);
//销售额趋势
const salesData = ref<salesDrendRes>({
  time: [],
  total: [],
});
//热销商品排名
const hotSellingData = ref<hotSellingProductsRes[]>([]);
//支付渠道排名
const paymentData = ref<paymentMethodRankingRes>({
  paymentMethod: [],
  quantity: [],
});
//热门商品分类
const popularData = ref<popularCategoriesRes[]>([]);
</script>

<style scoped>
.order-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  padding-top: 30px;
  overflow-y: hidden;
  height: 350px;
}
.payment-method {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding-top: 30px;
}
</style>
